<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/chat.css">

</head>
<body>
    <section id="chat">
        <div class="chatBody"></div>
        <div><img src="img/icon.jpg"></div>
        <textarea class="chatText"></textarea>
        <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
    </section>

    <script src="js/dev/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            let head = ["img/head01.jpg","img/head02.jpg","img/head03.jpg"];
            let user = ['时尚伊人','松松','六月奇迹'];
            $('#send').click(function () {
                let content = $('.chatText').val();
                if (content != ""){
                    /*console.log(666);*/
                    /*console.log(content);*/
                    let randNum = Math.floor(Math.random() * 3);
                    let $head = $('<div></div>');
                    let $headImg = $('<img>');
                    $headImg.prop({src:head[randNum],alt:'头像'});
                    $head.append($headImg);
                    let qqUser = user[randNum];
                    let $userName = $('<p></p>');
                    $userName.html(qqUser);
                    let $content = $('<div></div>');
                    $content.html(content);
                    $head.appendTo($('.chatBody'));
                    $userName.appendTo($('.chatBody'));
                    $content.addClass('chatContent');
                    $content.appendTo($('.chatBody'));
                    $('.chatText').val('');
                    $('.chatBody').css({overflow:'scroll'});
                }
            })
        })
    </script>
</body>
</html>